<template>
	<view class="headImgBox">
		<avatar selWidth="600upx" selHeight="600upx" quality="1"
		 @upload="myUpload" :avatarSrc="avatar_url" avatarStyle="width: 200upx; height: 200upx; border-radius: 100%;overflow: hidden;">
		</avatar>
		<view class="hint">*图片要求着装整洁,正面,清晰,白底</view>
		<view class="hint2">*格式严格要求jpg,jpeg,png后缀</view>
		<view class="hint3">*图片上传后必须提交审核,审核通过后才能修改成功</view>
	</view>
</template>

<script>
	import {dns} from '@/pages/dns.js';
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	export default {
		data() {
			return {
				avatar_url: ""
			}
		},
		onLoad() {
			this.getWoManList()
		},
		methods: {
			myUpload(rsp) {
				this.avatar_url = rsp.path; //更新头像方式一
				// console.log(rsp.path)
				uni.uploadFile({
					url: dns + 'upload/img', //仅为示例，非真实的接口地址
					filePath: rsp.path,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes);
						console.log(uploadFileRes.data);
						console.log(typeof(uploadFileRes.data))
						var res = JSON.parse(uploadFileRes.data)
						uni.setStorageSync("headImg", res.path)
						uni.showToast({
							icon: 'none',
						    title: res.msg,
						    duration: 2000
						})
					}
				});
			},
			getWoManList(){//获取月嫂个人中心资料
				uni.request({
					method: 'GET',
					header: {
						token: uni.getStorageSync("token")
					},
					url: dns + 'matron/data',
					success: (res)=>{
						if(res.data.status == 1){
							this.avatar_url = res.data.data.head_url;
						}
					}
				})
			}
		},
		components: {
			avatar
		}
	}
</script>

<style lang="scss">
	.headImgBox{
		text-align: center;
		padding-top: 100upx;
		.my-avatar{
			position: relative;
			overflow: hidden;
			margin-bottom: 60upx;
		}
		.my-avatar::after{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 200upx;
			height: 40upx;
			background-color: rgba(0,0,0,.5);
			font-size: 24upx;
			color: #fff;
			content: '修改';
		}
		.hint,.hint2{
			margin-bottom: 10upx;
		}
		.hint,.hint2,.hint3{
			font-size: 30upx;
		}
	}
</style>
